import React from 'react';
import { Form, Row, Col, Input, Button, Space } from 'antd';

class Search extends React.Component {

  constructor (props) {
    super(props);
    this.formRef = React.createRef()
  }

  /* 重置数据 */
  onReset = () => {
    const { reset } = this.props;
    reset ? reset() : null;
    this.formRef.current.resetFields();
  }

  /* 表单提交 */
  onFinish = (e) => {
    const { search } = this.props;
    search ? search(e) : null;
  }

  render() {    
    const {formRef, onReset} = this;
    return (
      <Form
        ref={formRef}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={this.onFinish}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name='roleName'
              label='角色名称：'>
              <Input placeholder='请输入角色名称' />
            </Form.Item>
          </Col>
          <Col span={6}>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button onClick={onReset}>重置</Button>
            </Space>
            </Form.Item>
          </Col>
        </Row>

      </Form>
    )
  }
}

export default Search